<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <divbo id = "box1" class = "box1Class">
        盒子1
    </div>
    <div name = "box2">
        盒子2
    </div>
</body>
</html>
<script>
    // 根据 id查找元素节点 
    let box1 = document.getElementById("box1")
    console.log(box1);
    //  根据name属性查找 获取到是所有该name属性的一个NodeList集合是一个伪数组
    let box2 = document.getElementsByName("box2")
    console.log(box2[0]);
    // 根据类名查找 获取到该标签名的所有节点 是一个集合
    let box1Class1= document.getElementsByClassName("box1Class")
    console.log(box1Class1);
    // 通过标签获取节点 该标签名的所有节点 是一个集合 
    let Newbox = document.getElementsByTagName("div")
    console.log( Newbox);
    // 根据css选择器查找 返回找到的第一个元素节点
    let box1N = document.querySelector("#name")
    console.log(box1N);
    let box = document.querySelectorAll(".box")
    console.log(box);
</script>